<%@ page import="java.util.List" %>
<%@ page import="pojo.Course" %><%--
  Created by IntelliJ IDEA.
  User: 秦乾正
  Date: 2023/11/10
  Time: 11:47
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>购物车</title>
        <link rel="stylesheet" href="./css/shopcar.css">
        <script>
            function updateTotal() {
                var totalAmount = 0.0;
                var prices = document.getElementsByName("price");

                for (var i = 0; i < prices.length; i++) {
                    totalAmount += parseFloat(prices[i].textContent);
                }

                document.getElementById("totalAmount").textContent = totalAmount.toFixed(2);
            }
        </script>
    </head>
    <body>
        <h1>结算列表</h1>
        <hr>
        <form action="#" method="post">
            <table>
                <tr>
                    <th>序号</th>
                    <th>课程图片</th>
                    <th>课程名称</th>
                    <th>价格</th>
                </tr>
                <%
                    List<Course> goodsList = (List<Course>) request.getAttribute("goodsList");
                    int i = 0;
                    double totalPrice = 0.0;
                    for (Course goods : goodsList) {
                %>
                <tr>
                    <td><%=++i%>
                    </td>
                    <td><img src="<%=goods.getImagepath()%>" class="course-image"/></td>
                    <td><%=goods.getName()%>
                    </td>
                    <td name="price"><%=goods.getPrice()%>
                    </td>
                </tr>
                <%
                    }
                %>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td>
                        <p class="total-amount">总金额: <span id="totalAmount">0.0</span></p>
                    </td>
                </tr>
            </table>
            <hr>
            <a class="checkout-button" style="cursor: pointer" oncopy="return false" oncut="return false;"
               onselectstart="return false" oncontextmenu="return false" onclick="showPopup()">确认支付</a>

        </form>

        <style>
            <%@include file="./css/shopcar.css" %>
        </style>

        <script>
            updateTotal();

            function showPopup() {
                var xhr1 = new XMLHttpRequest();
                xhr1.open("GET", "/order", true);
                xhr1.send();
                var choise = window.confirm("您是否要支付？");
                if (choise) {
                    var xhr2 = new XMLHttpRequest();
                    xhr2.open("POST", "/updateStatus", true);
                    xhr2.onreadystatechange = function () {
                        if (xhr2.readyState === 4 && xhr2.status === 200) {
                            alert("支付成功");
                            window.location.href = "/list";
                        } else {
                            alert("支付失败")
                        }
                    };
                    xhr2.send();
                }
            }
        </script>
    </body>
</html>